/**
 * Created by LX on 2015/9/5.
 * 楼房布局控件
 */

var BuildingLayoutWidget = function (element, options) {
    this.options             = options
    this.$body               = $(document.body)
    this.$element            = $(element)

    this.isShown             = null
    this.originalBodyPad     = null
    this.scrollbarWidth      = 0
    this.ignoreBackdropClick = false


    //this._root.css({ "background-image": "url(" + param.backgroundImage + ")" });

    //计算楼层数、单元数、每层每单元户数
    this.floorNum=options.floorNum || 0;
    this.unitNum=options.unitNum || 0;
    this.houseNumOfPerFloorAndUnit=options.houseNumOfPerFloorAndUnit || 0;
    //每层户数
    this.houseNumOfPerFloor=this.houseNumOfPerFloorAndUnit*this.unitNum;
    //楼布局数据
    this.layoutData=options.layoutData;
    this.maxHouseNumber=options.maxHouseNumber||"3-404";//最大的编号，{单元号}-几层几号门
}
//展示
BuildingLayoutWidget.prototype.show=function() {
    if(this.floorNum<1 || this.unitNum<1 || this.houseNumOfPerFloorAndUnit<1){
        return;
    }
    //绘制楼层布局图
    var htmlContent=this.getLayoutHtmlContent();
    this.$element.append(htmlContent);
}
//获得HTML内容
BuildingLayoutWidget.prototype.getLayoutHtmlContent=function() {
    var htmlContent='<table id="tableBuildingLayout" class="table table-striped table-condensed table-bordered ">';

    //head
    //单元th
    var htmlHeadUnit='';
    for(var i=1;i<=this.unitNum;i++){
        var currentUnit=i;
        htmlHeadUnit+='<th colspan="'+this.houseNumOfPerFloorAndUnit+'">'+currentUnit+'单元</th>';
    }
    var htmlTableHead='<thead class="text-center">\
        <tr>\
        <th>楼层</th>\
        '+htmlHeadUnit+'\
    </tr>\
    </thead>\
    ';
    htmlContent+=htmlTableHead;

    //tbody
    htmlContent+='<tbody>';
    //输出每个楼层
    for(var j=this.floorNum;j>0;j--){
        var currentFloor=j;
        //收集每户的内容
        var htmlPerFloorHouse='';
        //单元
        for(var u=1;u<=this.unitNum;u++){
            var currentUnit=u;
            //门牌号
            for(var h=1;h<=this.houseNumOfPerFloorAndUnit;h++){
                var currentHouse=h;
                htmlPerFloorHouse+=this.getHouseHtmlContent(currentFloor,currentUnit,currentHouse);
            }
        }
        //合并
        var htmlBodyRow='<tr>\
            <th scope="row">'+currentFloor+'</th>\
            '+htmlPerFloorHouse+'\
        </tr>';
        htmlContent+=htmlBodyRow;
    }
    htmlContent+='</tbody>';
    htmlContent+='</table>';
    return htmlContent;
}
//获得每家的HTML内容
BuildingLayoutWidget.prototype.getHouseHtmlContent=function(currentFloor,currentUnit,currentHouse) {
    var houseId=this.getHouseId(currentFloor,currentUnit,currentHouse);
    //取得当前用户的信息
    var houseManName='XXX';
    var temperature='35℃';
    var houseTel='13124567653';

    var result='<td>\
            <ul class="list-group my-list-group-simple my-list-group-simple">\
                <li class="list-group-item">\
                    <span>\
                        <button type="button" class="btn btn-info btn-xs" disabled="disabled" >'+houseId+'</button>\
                    </span>\
                </li>\
                <li class="list-group-item">\
                    <span>'+houseManName+' | '+temperature+'</span>\
                </li>\
                <li class="list-group-item">\
                    <img src="static/images/heating/u47.png" alt="" class="img-rounded my-icon-small">\
                    '+houseTel+'\
                    </li>\
                </ul>\
            </td>\
            ';

    return result;
}
//获得门牌号,例如1-301
BuildingLayoutWidget.prototype.getHouseId=function(currentFloor,currentUnit,currentHouse) {
    var result='';
    var sHouse=currentHouse<10?'0'+currentHouse:currentHouse;
    result+=currentUnit+'-'+currentFloor+sHouse;
    return result;
}



//住户家楼房布局信息
function ShowBuildingLayoutDetail(id){


    var jqDialogBody=$("#dialogBody");
    jqDialogBody.children().remove();

    var htmlContent='<!-- Nav tabs -->\
    <ul class="nav nav-tabs myTabs" role="tablist">\
    <li role="presentation" class="active">\
    <a href="#window_tab_content_1" aria-controls="window_tab_content_1" role="tab" data-toggle="tab">基本信息</a>\
    </li>\
    <li role="presentation">\
    <a href="#window_tab_content_2" aria-controls="window_tab_content_2" role="tab" data-toggle="tab">楼位图</a>\
    </li>\
    </ul>\
        <!-- Tab panes -->\
    <div class="tab-content">\
    <div role="tabpanel" class="tab-pane active" id="window_tab_content_1">\
        基本信息...</div>\
    <div role="tabpanel" class="tab-pane" id="window_tab_content_2" style="width:auto;overflow-x:auto;"></div>\
    </div>';
    jqDialogBody.append(htmlContent);


    //生成楼位图
    var optionsBuilding={};
    optionsBuilding.floorNum=6;
    optionsBuilding.unitNum=3;
    optionsBuilding.houseNumOfPerFloorAndUnit=4;
    var buildingLayoutWidget=new BuildingLayoutWidget('#window_tab_content_2',optionsBuilding);
    buildingLayoutWidget.show();

    $('#divInfoWindow').modal('show');

}
